<template>
  <div>
   <div class="box">
    <div class="boxleft">
      <div class="lefttop">
        <div class="lefttopleft"> 
          <div class="title">工单统计<span class="sub-title">2023.03.01-2023.03.09</span ></div>
          <div class="body">
            <ul>
              <li><p>5</p><p :style="[{fontSize:'12px'}]">工作总数(个)</p></li>
               <li><p>5</p><p :style="[{fontSize:'12px'}]">完成工单(个)</p></li>
               <li><p>5</p><p :style="[{fontSize:'12px'}]">进行工单(个)</p></li>
               <li><p>5</p><p :style="[{fontSize:'12px'}]">取消工单(个)</p></li>
            </ul>
          </div>
        </div>

        <div class="lefttopright lefttopleft">
          <div class="title">销售统计<span class="sub-title">2023.03.01-2023.03.09</span ></div>
          <div class="body">
            <ul>
              <li><p>3963</p><p :style="[{fontSize:'12px'}]">订单量(个)</p></li>
               <li><p>2.51</p><p :style="[{fontSize:'12px'}]">销售额(万)</p></li>
            </ul>
          </div>

        </div>
      </div>

      <div class="leftbottom ">
        <div class="leftbottomleft">
         <div class="title">销售数据<span class="sub-title">2023.03.01-2023.03.09</span ></div> 
         <div class="chart-box" ref="chartBox"></div>
        </div>
        
        <div class="leftbottomright">
          <div class="chart-box1" ref="chartBox1"></div>
        </div>
      </div>
    </div>
    <div class="boxright"><img src="../../assets/商品热榜.jpg" alt=""></div>
   </div>


    <div class="box1">
       <div class="left">
        <div class="leftleft chart-box2" ref="chartBox2"></div>
        <div class="leftright"><div class="tp"><img src="../../assets/合作商.jpg" alt=""></div></div>
       </div>
       <div class="right"><img src="../../assets/异常设备监控.jpg" alt=""></div>
    </div>
   


  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'dashe',

  data() {
    return {
      
    };
  },

  mounted() {
     // 1. 准备一个有宽高的盒子
    // 2. echarts.init 初始化一个 echart 实例
    const myChart = echarts.init(this.$refs.chartBox)
    // 3. 准备好 对应的 option
    const option = {
      
      title: {
        text: '                                               销售额趋势图',
        textStyle:{ fontWeight : 'normal',fontSize : 15},
        // text:'单位: 元'
         subtext:'         单位: 元',
          subtextStyle:{ color : '#999'},
      },
      tooltip: {
        trigger: 'axis'
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['星期一', '星期二', '星期三', '星期四', '星期五',"星期六"]
      },
      yAxis: {
        type: 'value'
      },
      
       visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
        gt: 0,
        lt: 5,
        color: 'rgba(254, 199, 200, 1)'
      },
     
    ]
  },
      series: [
        {
          name: '销售额',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          smooth: true,
           lineStyle: {
           color: 'red',
           width: 3,
      },
          data: [1134.84, 1842.37, 3164.94, 3080.85, 1564.85,0]
        },
      ]
    }
    // 4. setOption 就可以
    myChart.setOption(option)
  

    // 1. 准备一个有宽高的盒子
    // 2. echarts.init 初始化一个 echart 实例
    const myChart1 = echarts.init(this.$refs.chartBox1)
    // 3. 准备好 对应的 option
    const option1 = {
      
      title: {
        text: '                                               销售额分布',
        textStyle:{ fontWeight : 'normal',fontSize : 15},
        // text:'单位: 元'
         subtext:'         单位: 元',
          subtextStyle:{ color : '#999'},
      },
      tooltip: {
        trigger: 'axis'
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        data: ['北京平', '霍营街']
      },
      yAxis: {
        type: 'value'
      },
      
       visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
       
        color: 'rgba(159, 193, 255, 1)'
      },
     
    ]
  },
      series: [
        {
          name: '销售额',
          type: 'bar',
          stack: 'Total',
          // areaStyle: {},
          // smooth: true,
          barWidth:'20%',
           lineStyle: {
           color: '#9fc1ff',
      },
          data: [7149.46, 3503.55]
        },
      ]
    }
    // 4. setOption 就可以
    myChart1.setOption(option1)

     // 1. 准备一个有宽高的盒子
    // 2. echarts.init 初始化一个 echart 实例
    const myChart2 = echarts.init(this.$refs.chartBox2)
    // 3. 准备好 对应的 option
    const option2 = {
      
      title: {
        text: '合作商点位数Top5',
        textStyle:{fontSize : 18},
      },
   
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 130],
      center: ['50%', '60%'],
      roseType:'radius',
      data: [
        { value: 62.5, name: '金燕龙合作商62.5%' },
        { value: 12.5, name: '天华物业12.5%' },
        { value: 12.5, name: '北京合作商12.5%'},
        { value: 6.25, name: 'likede6.25%' },
        { value: 6.25, name: '佳佳6.25%' },
      ],
  
  
      
    }
  ]
    }
    // 4. setOption 就可以
    myChart2.setOption(option2)
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>
  
  .box{
    display: flex;
    justify-content: space-between;
    background-color: #f8fafd;
    .boxleft{
         width: 74%;
         height: 538px;
         padding-left:10px;
         padding-right:10px;
         background-color: #f8fafd;
         
      .lefttop{
        display: flex;
        justify-content: space-between;
           .lefttopleft{
              width: 48%;
              height: 166px;
              background-color:#e9f3ff;
              background-image: url(../../assets/帝可得1.png),url(../../assets/帝可得2.png);
              background-repeat:no-repeat,no-repeat;
              background-position:0 0 ,calc(100% - 12px) 100% ;
              border-radius: 21px;
              .title{
                margin: 20px 20px 0px 20px;
                -webkit-box-align:center;
                align-items: center;
                -webkit-box-flex:1;
                flex: 1;
                font-size: 16px;
                font-weight: 600;
                color: #333;
                 .sub-title{
                  margin-left: 10px;
                  font-size: 12px;
                  color: #999;
                 }
              }
              .body{
                ul{
                  display: flex;
                  justify-content: space-evenly;
                   list-style: none;
                }
                
              }
           }
           .lefttopright{
              width: 48%;
              height: 166px;
              background-color:#fbefe8;
              background-image: url(../../assets/帝可得3.png);
              background-repeat:no-repeat;
              background-position:calc(100% - 12px) 100% ;
           }
      }
      .leftbottom{
              width: 100%;
              height: 352px;
              margin-top: 20px;
              display: flex;
              justify-content: space-between;
               .title{
                margin: 20px 20px 0px 20px;
                -webkit-box-align:center;
                align-items: center;
                -webkit-box-flex:1;
                flex: 1;
                font-size: 16px;
                font-weight: 600;
                color: #333;
                 .sub-title{
                  margin-left: 10px;
                  font-size: 12px;
                  color: #999;
                 }
              }
              
              .leftbottomleft{
                    width: 48%;
                    background-color: #fff;
                    border-radius: 20px; 
                    .chart-box {
                      width: 100%;
                      height: 300px;
                    }
                    
              }
              .leftbottomright{
                    width: 48%;
                    border-radius: 20px;
                    background-color: #fff;
                    .chart-box1{
                      margin-top: 41px;
                       width: 100%;
                      height: 300px;
                    }
              }
           }
    }
    .boxright{
      width: 24%;
      height: 538px;
    }
  }

  .box1{
    display: flex;
    justify-content: space-between;
    padding:20px 0;
    background-color: #f8fafd;
    .left{
         width: 55%;
         height: 353px;
         display: flex;
         justify-content: space-between;
         background-color: #ffffff;
         .leftleft{
          width: 78%;
         }
         .leftright{
          width: 22%;
          .tp{
              width: 154px;
              height: 233px;
              margin: 70px 0px;
             
          }
         }
    }
    .right{
        width: 44%;
        height: 353px;
    }
  }
</style>